<template>
  <el-form ref="formRef" :rules="rules" :model="form">
    <el-form-item :label="currentLabel" :label-width="formLabelWidth" prop="name">
      <div class="my-input-container">
        <el-input v-model="form.name"></el-input>
      </div>
    </el-form-item>
    <el-form-item label="上传图片" prop="image" :label-width="formLabelWidth">
      <el-upload class="avatar-uploader" action :http-request="upload" :show-file-list="false">
        <img v-if="form.image" :src="form.image" class="avatar" />
        <i v-else style="line-height: 100px;" class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>

      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt />
      </el-dialog>
    </el-form-item>
    <el-form-item :label-width="formLabelWidth">
      <el-button plain @click="resetForm('formRef')">取消</el-button>
      <el-button type="primary" @click="submitForm('formRef')">确定</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: "",
        image: ""
      },
      rules: {
        name: [
          { required: true, message: `类目名称不能为空` },
          { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
        ],
        image: [{ required: true, message: "请选择图片", trigger: "blur" }]
      },
      currentLabel: "", //当前label
      currentParentId: "", //当前父类id
      currentId: "", //当前id
      currentType: "", //当前类型 edit编辑
      currentLevel: null, //当前输的级别
      category: [],
      formLabelWidth: "120px",
      dialogVisible: false,
      dialogImageUrl: ""
    };
  },
  methods: {
    init(level, parentId, name, type, id, image) {
      //debugger;
      this.currentLevel = level;
      this.currentParentId = parentId;
      this.currentLabel = level == 0 ? "一级类目" : "二级类目";
      this.form.name = type ? name : "";
      this.currentType = type;
      this.currentId = id;
      this.form.image = image;
      return 0;
      // this.category = []
      // let category = [
      //     { value: '', lable: '一级分类', prop: 'one' },
      //     { value: '', lable: '二级分类', prop: 'two' },
      //     { value: '', lable: '三级分类' },
      // ]
      // for (let i = 1; i >= level; i--) {
      //     this.category.push(category[i])
      // }
      // this.category.reverse()
    },
    clear() {},
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let param = {
            id: this.currentId,
            name: this.form.name,
            parentId: this.currentParentId,
            isParent: this.currentLevel == 0 ? 1 : 0,
            sort: "1",
            image: this.form.image
          };
          if (!this.currentType) {
            //新增
            this.$service.addCategory(param).then(res => {
              if (res.code == "00000") {
                this.$emit("submit", false);
              } else {
                this.$message({
                  message: res.message,
                  tyoe: "warning"
                });
              }
            });
          } else {
            //编辑
            this.$service.updateCategory(param).then(res => {
              if (res.code == "00000") {
                this.$emit("submit", false);
              } else {
                this.$message({
                  message: res.message,
                  tyoe: "warning"
                });
              }
            });
          }
        }
      });
    },
    resetForm(formName) {
      this.$emit("cancel", false);
      this.$refs[formName].resetFields();
    },
    upload(file) {
      this.$service.uploadFileFunction(file, result => {
        //console.log(result);
        this.form.image = result.url;
      });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.my-input-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  .el-input {
    flex: 1;
    width: 50%;
    margin-right: 10px;
  }
}
</style>